<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>规格管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>

</head>

<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->
<div class="box-header with-border">
    <h3 class="box-title">规格管理</h3>
</div>
<div class="box-body">
    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" data-toggle="modal"
                            data-target="#editModal"><i class="fa fa-file-o"></i> 新建
                    </button>
                    <button type="button" class="btn btn-default" title="删除" onclick="deleteSpecs()"><i
                            class="fa fa-trash-o"></i> 删除
                    </button>

                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i
                            class="fa fa-refresh"></i> 刷新
                    </button>
                </div>
            </div>
        </div>
        <div class="box-tools pull-right">
            <div class="has-feedback">
                规格名称：<input>
                <button class="btn btn-default">查询</button>
            </div>
        </div>
        <!--工具栏/-->
        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">规格ID</th>
                <th class="sorting">规格名称</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody id="spec">
            </tbody>
        </table>
        <!--数据列表/-->
        <form id="page">
            <a href="javascript:toPage(1)">首页</a>
            <a href="javascript:toPage(2)">上一页</a>
            第<input type="text" id="pageNum" size="1px" readonly="readonly">页/
            共<input type="text" id="pages" size="1px" disabled="disabled">页/
            共<input type="text" id="total" size="1px" disabled="disabled">条
            <a href="javascript:toPage(3)">下一页</a>
            <a href="javascript:toPage(4)">尾页</a>
        </form>
    </div>
    <!-- 数据表格 /-->
</div>
<!-- /.box-body -->


<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">规格编辑</h3>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-striped" width="800px">
                    <tr>
                        <td>规格名称</td>
                        <td><input class="form-control" name="specName" id="specName" placeholder="规格名称"></td>
                    </tr>
                </table>

                <!-- 规格选项 -->
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" onclick="addSpc()"><i
                            class="fa fa-file-o"></i> 新增规格选项
                    </button>

                </div>

                <table class="table table-bordered table-striped table-hover dataTable">
                    <thead>
                    <tr>
                        <th class="sorting">规格选项</th>
                        <th class="sorting">排序</th>
                        <th class="sorting">操作</th>
                    </thead>
                    <tbody id="specOption">
                    </tbody>
                </table>


            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="add()">增加</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--修改窗口-->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <form id="updatefrom">
    </form>
</div>

</body>

</html>
<script>
    $(function () {
        getAll();
    })

    function getAll(num) {
        $.ajax({
            url: "/spec/getAll",
            type: "get",
            dataType: "json",
            data: {pageNum: num},
            async: false,
            success: function (result) {
                if (result.code == "666") {
                    var data = result.data.rows;
                    var html = '';
                    $(data).each(function (i, v) {
                        html += '<tr>'
                        html += '<td><input type="checkbox" value="' + v.id + '"></td>'
                        html += '<td>' + v.id + '</td>'
                        html += '<td>' + v.specName + '</td>'
                        html += '<td class="text-center">'
                        html += '<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#updateModal" onclick="toupdate(' + v.id + ')">修改</button>'
                        html += '</td>'
                        html += '</tr>'
                    });
                    $("#spec").html(html);
                    //分页
                    $("#pageNum").val(result.data.pageNum)
                    $("#pages").val(result.data.pages)
                    $("#total").val(result.data.total)
                }
            }, error: function (result) {
                alert("系统报错!!!")
            }

        })
    }

    //分页
    function toPage(id) {
        var num = parseInt($("#pageNum").val())
        var pages = parseInt($("#pages").val())
        var p = num;
        if (id == 1) {
            if (num <= 1) {
                alert("已经是首页");
                return;
            }
            p = 1;
            $("#pageNum").val(1);
        }
        if (id == 2) {
            if (num == 1) {
                alert("已经是首页")
                return;
            }
            p = num - 1;
            $("#pageNum").val(num - 1);
        }
        if (id == 3) {
            if (num == pages) {
                alert("已经是尾页")
                return;
            }
            p = num + 1;
            $("#pageNum").val(num + 1);
        }
        if (id == 4) {
            if (num == pages) {
                alert("已经是尾页")
                return;
            }
            p = pages
            $("#pageNum").val(pages);
        }
        getAll(p);
    }

    //增加规格选项
    function addSpc() {
        var html = '<tr>' +
            '<td><input class="form-control" name="optionName" placeholder="规格选项">' +
            '</td><td><input class="form-control" name="orders" placeholder="排序"></td><td>' +
            '<button type="button" class="btn btn-default" onclick="delOpt(this)" title="删除"><i className="fa fa-trash-o"></i> 删除' +
            '</button></td>' +
            '</tr>';
        $("#specOption").append(html);
    }

    //增加规格选项
    function addSpc1() {
        var html = '<tr>' +
            '<td><input class="form-control" name="optionName" placeholder="规格选项">' +
            '</td><td><input class="form-control" name="orders" placeholder="排序"></td><td>' +
            '<button type="button" class="btn btn-default" onclick="delOpt(this)" title="删除"><i className="fa fa-trash-o"></i> 删除' +
            '</button></td>' +
            '</tr>';
        $("#specOption1").append(html);
    }

    //删除规格选项
    function delOpt(obj) {
        var judge = confirm("确认删除吗?")
        if (judge = true) {
            tdNode = obj.parentNode;//得到td
            trNOde = tdNode.parentNode;//得到tr
            tbNOde = trNOde.parentNode;//得到table
            tbNOde.removeChild(trNOde);
        }
    }


    //增加
    function add() {
        //jquery函数 : 查找子标签
        var trs = $("#specOption").find('tr');
        var arr = [];
        $(trs).each(function (i, e) {
            var tds = $(e).find('td');
            var TbSpecificationOption = {
                optionName: $(tds[0]).find('input').val(),
                orders: $(tds[1]).find('input').val()
            }
            arr.push(TbSpecificationOption)
        })
        console.log(arr)
        var arrStr = JSON.stringify(arr);//将对象转成字符串

        $.ajax({
            url: "/spec/insert",
            type: "post",
            dataType: "Text",
            data: {specName: $("#specName").val(), arrStr: arrStr},
            async: false,
            success: function (data) {
                if (data == 1) {
                    alert("增加成功")
                }
            },
            error: function (data) {
                alert("增加失败!!!")
            }
        })
    }

    //回显
    function toupdate(id) {
        $.ajax({
            url: "/spec/toupdate?id=" + id,
            type: "post",
            data: {},
            async: false,
            dataType: "json",
            success: function (r) {
                console.log(r.id)
                var list = r.specOptionsList;
                console.log(list);
                var to = '';
                to += '<div class="modal-dialog" >'
                to += '<div class="modal-content">'
                to += '<div class="modal-header">'
                to += '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>'
                to += '<h3 id="myModalLabel">规格修改</h3>'
                to += '</div>'
                to += '<div class="modal-body">'
                to += '<table class="table table-bordered table-striped"  width="800px">'
                to += '<tr>'
                to += '<td>规格名称</td>'
                to += '<td><input  name="id" id="id1" value="' + r.id + '" type="hidden"><input name="specname" id="specName1" class="form-control" placeholder="规格名称" value="' + r.specname + '"></td>'
                to += '</tr>'
                to += '</table>'
                to += ' <!-- 规格选项 -->'
                to += ' <div class="btn-group">'
                to += '<button type="button" class="btn btn-default" title="新建" onclick="addSpc1()"><i class="fa fa-file-o"></i> 新增规格选项</button>'
                to += '</div>'
                to += ' <table class="table table-bordered table-striped table-hover dataTable">'
                to += '<thead>'
                to += '<tr>'
                to += '<th class="sorting">规格选项</th>'
                to += '<th class="sorting">排序</th>'
                to += '<th class="sorting">操作</th>'
                to += '</tr>'
                to += '</thead>'
                to += '<tbody id="specOption1">'
                $(list).each(function (i, e) {
                    to += '<tr>'
                    to += '<td>'
                    to += '<input  class="form-control" placeholder="规格选项" value="' + e.optionName + '">'
                    to += '</td>'
                    to += '<td>'
                    to += '<input  class="form-control" placeholder="排序" value="' + e.orders + '">'
                    to += '</td>'
                    to += '<td>'
                    to += '<button type="button" class="btn btn-default" title="删除" onclick="delOpt(this)"><i class="fa fa-trash-o"></i> 删除</button>'
                    to += '</td>'
                    to += '</tr>'
                })
                to += '</tbody>'
                to += '</table>'
                to += '</div>'
                to += '<div class="modal-footer">'
                to += '<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="update()">修改</button>'
                to += '<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>'
                to += '</div>'
                to += '  </div>'
                to += '</div>'

                $("#updatefrom").html(to);
            },
            error: function (r) {
                alert("可恶!!!!");
            }
        })
    }

    //修改
    function update() {
        //jquery函数 : 查找子标签
        var trs = $("#specOption1").find('tr');
        var arr = [];
        $(trs).each(function (i, e) {
            var tds = $(e).find('td');
            var TbSpecificationOption = {
                optionName: $(tds[0]).find('input').val(),
                orders: $(tds[1]).find('input').val()
            }
            arr.push(TbSpecificationOption)
        })
        console.log(arr)
        var arrStr = JSON.stringify(arr);//将对象转成字符串
        console.log(arrStr);
        $.ajax({
            url: "/spec/update",
            type: "POST",
            data: {specname: $("#specName1").val(), id: $("#id1").val(), arrStr: arrStr},
            async: false,
            dataType: "json",
            success: function (r) {
                if (r == 1) {
                    alert("修改成功")
                }
            },
            error: function (r) {
                alert("修改失败!!!!");
            }
        })
    }

    //批量删除
    function deleteSpecs() {
        if (confirm("是否删除")) {
            var ids = []  //定义一个数组
            $("[type=checkbox]").each(function (i, e) {   //获取所有复选框的value,循环
                if (e.checked) {
                    ids.push(e.value);
                }
            })
            alert(ids);
            $.ajax({
                url: "/spec/deleteCheck?ids=" + ids,
                type: "get",
                dataType: "json",
                async: false,
                success: function (result) {
                    if (result == 1) {
                        alert("删除成功")
                        location.reload();
                    } else {
                        alert("删除失败")
                    }
                },
                error: function () {
                    alert("系统异常")
                }
            })
        }
    }
</script>